import { useContext } from "react";
import { GanttConsts } from "../../constants";
import GanttContext from "../../context";
import GanttTable from "./gantt-table";
import VirtualScrollbar from "../../components/virtual-scrollbar";

// 扩展dayjs插件
function Gantt() {
    const { flattenedTasks, totalWidth } = useContext(GanttContext);
    // 计算垂直滚动相关参数
    const totalHeight = flattenedTasks.length * GanttConsts.ITEM_HEIGHT;
    return <>
        {/* 双向虚拟滚动条 */}
        <VirtualScrollbar
            direction="vertical"
            totalHeight={totalHeight}
            style={{
                top: `${GanttConsts.HEAD_HEIGHT}px`,
            }}
        />
        <VirtualScrollbar
            direction="horizontal"
            totalWidth={totalWidth}
            style={{
                left: 0,
            }}
        />
        <GanttTable />
    </>
}

export default Gantt;
